<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="add">
    <hr>
    <div >
        <h1>正在进行 ( <span id="ingNum"></span> )</h1>
        <ul id="ing"></ul>
        <h1>已经完成 ( <span id="edNum"></span> )</h1>
        <ul id="ed"></ul>
    </div>
</body>
</html>
<script>
    class Todo{
        constructor(options){
            //获取元素
            let add=document.querySelector('#add');
            let ing=document.querySelector('#ing');
            let ingNum=document.querySelector('#ingNum');
            let ed=document.querySelector('#ed');
            let edNum=document.querySelector('#edNum');
            //声明一个数组本地存储
            let list=JSON.parse(localStorage.getItem('list'))||[]
            //初始化调用方法
            this.addInp()
            this.show()
            this.del()
        }
        //添加
        addInp(){
         //监听输入框
           this.add.addEventListener('keydown',()=>{
            console.log(event)
           })
        }
        //本地存储
        setCity(){

        }
        //渲染
        show(){

        }
        //删除
        del(){

        }
    }
    
    new Todo({
        add:'#add',
        ing:'#ing',
        ingNum:'#ingNum',
        ed:'#ed',
        edNum:'#edNum'
    })
</script>